<template>
	<div class="container">
		<view class="content">
			<text :class="{active:index===selectedIndex}" @click="changePage(index)" v-for="(item, index) in TopNav" :key="index">{{item}}</text>
		</view>
		<view>
				<!-- <component :is="Component[selectedIndex]"></component> -->
			<view>
				<ToBeSent v-if="selectedIndex===0"/>
				<OutOfDelivery v-if="selectedIndex===1"/>
				<Done v-if="selectedIndex===2"/>
			</view>
		</view>
	</div>
</template>

<script>
import ToBeSent from '../ToBeSent/ToBeSent.vue';
import OutOfDelivery from '../OutOfDelivery/OutOfDelivery.vue';
import Done from '../Done/Done.vue'
import { mapState, mapMutations } from "vuex";
export default {
	components:{ToBeSent, OutOfDelivery, Done},
	data() {
		return {
			title: 'Hello',
			TopNav:['待派送','派送中','已完成'],
			selectedIndex:-1,
			// Component:['ToBeSent', 'OutOfDelivery', 'Down'],
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		...mapMutations([
			"setBaseUserInfo"
		]),
		changePage(index) {
			// console.log(index)
			this.selectedIndex = index
		},
		getData() {
			let res = wx.getMenuButtonBoundingClientRect()
			let that = this
			uni.showModal({
				title: "温馨提示",
				content: "微信授权登录后即可接单！",
				showCancel: false,
				success(res) {
					if (res.confirm) {
						// console.log("success")
						that.selectedIndex = 0
						let jsCode = ""
						wx.login({
							provider: "weixin",
							success: (loginRes) => {
								if (loginRes.errMsg === "login:ok") {
									jsCode = loginRes.code
								}
							},
						})
						// 授权
						wx.getUserProfile({
							desc: "登录",
							success:async function (userInfo) {
								that.setBaseUserInfo(userInfo.userInfo)
								const params = {
									code: jsCode,
								}
							},
							fail: function (err) { },
						})
					}
				},
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	background-color: #ecfdfa;
}
.content {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-around;
	z-index: 999;
	
	background-color: white;
	height: 20vh;
	text {
		display: inline-block;
		font-size: 20px;
		color: darkgray;
		// margin-bottom: 8%;
		height: 60px;
		line-height: 60px;
		margin-bottom: 1%;
	}
	.active {
		box-sizing: border-box;
		border-bottom: 4px solid #2aba66;
		color: black;
	}
}
	
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
